﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>发布资源</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta content="Coderthemes" name="author"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" th:href="@{/admin/images/favicon.png}"/>
    <link th:href="@{/plugins/zui/1.10.0/css/zui.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/plugins/jquery-ui/jquery-ui.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/plugins/jquery-tagsinput/jquery-tagsinput.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/plugins/zui/1.10.0/lib/picker/zui.picker.min.css}" rel="stylesheet">
    <link th:href="@{/plugins/font-awesome/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/index/css/style.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/plugins/md/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/plugins/uploader/uploadImg.css}" rel="stylesheet"/>
    <style>
        #tags_addTag input {
            width: 100%;
        }

        .progress {
            background-color: #c6c0bf;
        }

        .form-control {
            display: inline-block !important;
        }

        .picker-selections {
            min-height: 42px !important;
        }

        #fileButton {
            max-width: 150px;
            height: 25px;
            line-height: 15px;
            float: right;
        }

        #progressContainer {
            padding-right: 0;
            padding-left: 0;
        }
    </style>
</head>
<body class="fixed-left">
<div id="wrapper">
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            发布资源
                        </h4>
                    </div>
                    <div class="col-md-12">
                        <form id="articleForm" role="form" novalidate="novalidate">
                            <div class="form-group col-md-12" style="padding: 0;">
                                <input type="text"
                                       class="form-control"
                                       placeholder="请输入文章标题（必须）"
                                       name="title"
                                       required="required"
                                       aria-required="true"/>
                            </div>
                            <div class="form-group col-md-12" style="padding: 0;">
                                <input id="resource" type="text" class="col-md-10" placeholder="文章资源(可以不填)"
                                       disabled/>
                                <button id="fileButton" type="button"
                                        class="btn btn-warning waves-effect waves-light col-md-2">
                                    选择文件
                                </button>
                                <input type="hidden" id="seqs" value="">
                            </div>
                            <div class="progress col-md-12" id="progressContainer" style="display: none;">
                                <div id="progressBar"
                                     class="progress-bar progress-bar-success progress-bar-striped"
                                     role="progressbar"
                                     aria-valuenow="0"
                                     aria-valuemin="0"
                                     aria-valuemax="100"
                                     style="min-width: 2em;width: 0;">
                                    0%
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group">
                                <textarea style="height: 450px"
                                          autocomplete="off"
                                          id="text" name="text"
                                          class="markdown-textarea"
                                ></textarea>
                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group col-md-12" style="padding: 0;">
                                <div class="switch col-md-3">
                                    <input type="checkbox" id="allowComment" checked>
                                    <label for="allowComment">允许评论</label>
                                </div>
                                <div class="switch col-md-3">
                                    <input type="checkbox" id="allowLikes" checked>
                                    <label for="allowLikes">允许点赞</label>
                                </div>
                                <div class="switch col-md-3">
                                    <input type="checkbox" id="selfView">
                                    <label for="selfView">个人可见</label>
                                </div>
                            </div>
                            <div class="form-group col-md-12 panel">
                                <div class="panel-body">
                                    <div class="col-md-4">
                                        <select name="categoryId" id="categoryId" data-placeholder="文章分类"
                                                class="picker">
                                            <option value=""></option>
                                            <th:block th:each="category:${pageService.getCategories()}">
                                                <option th:value="${category.categorySeq}">[[${category.name}]]</option>
                                            </th:block>
                                        </select>
                                    </div>
                                    <div class="col-md-8">
                                        <input id="labels" name="labels" type="text" value="">
                                    </div>

                                </div>
                            </div>
                            <div class="form-group col-md-12 panel">
                                <div class="panel-body">
                                    <div class="col-md-6">
                                        <div class="main">
                                            <div class="upload-content">
                                                <label for="upload"><h3>上传封面</h3></label>
                                                <div class="content-img">
                                                    <ul class="content-img-list"></ul>
                                                    <div class="file">
                                                        <i class="icon icon-plus icon-3x"></i>
                                                        <input type="file"
                                                               name="file"
                                                               accept="image/*"
                                                               id="upload"
                                                               multiple/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="summary"><h3>文章摘要</h3></label>
                                        <textarea id="summary"
                                                  placeholder="文章摘要"
                                                  style="width: 100%;min-height: 150px"
                                        ></textarea>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="text-center bg-white" style="position: sticky;bottom: 10px;width: 100%;height: 10%">
    <a class="btn btn-default waves-effect waves-light" th:href="'/'">返回主页</a>
    <button type="button" class="btn btn-primary waves-effect waves-light"
            onclick="subArticle('publish');">
        保存文章
    </button>
    <button type="button" class="btn btn-warning waves-effect waves-light"
            onclick="subArticle('draft');">
        存为草稿
    </button>
</div>
<script th:src="@{/plugins/zui/1.10.0/lib/jquery/jquery.js}"></script>
<script th:src="@{/plugins/zui/1.10.0/js/zui.min.js}"></script>
<script th:src="@{/plugins/zui/1.10.0/lib/picker/zui.picker.min.js}"></script>
<script th:src="@{/plugins/uploader/uploader.min.js}"></script>
<script th:src="@{/plugins/uploader/uploadImg.js}"></script>
<script th:src="@{/admin/plugins/md/js/jquery.scrollto.js}"></script>
<script th:src="@{/admin/js/base.js}"></script>
<script th:src="@{/admin/plugins/md/js/pagedown.js}"></script>
<script th:src="@{/admin/plugins/md/js/pagedown-extra.js}"></script>
<script th:src="@{/admin/plugins/md/js/diff.js}"></script>
<script th:src="@{/admin/plugins/md/js/md.js}"></script>
<script th:src="@{/admin/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script th:src="@{/admin/plugins/jquery-tagsinput/jquery-tagsinput.js}"></script>
<script th:src="@{/plugins/md5/spark-md5.min.js}"></script>
<script th:src="@{/plugins/request/axios.min.js}"></script>
<script th:src="@{/plugins/request/request.js}"></script>
<script th:src="@{/index/js/article.js}"></script>
<script>
    $('#categoryId').picker();
    $('#labels').tagsInput({
        'autocomplete': {
            'source': [
                "java",
                "Ai"
            ]
        },
        placeholder: "添加标签",
        limit: 5,
        minChars: 2,
        maxChars: 15,
    });
    let progressBar = $('#progressBar');
    let uploader = new Uploader({
        target: '/api/upload',
        chunkSize: 1024 * 1024 * 2,
        simultaneousUploads: 1,
        singleFile: true,
        checkChunkUploadedByResponse: function (chunk, message) {
            let objMessage = {}
            try {
                objMessage = JSON.parse(message)
                // console.log("process:", chunk, ": ", objMessage);
            } catch (e) {
            }
            return (objMessage.uploaded_chunks || []).indexOf(chunk.offset + 1) >= 0
        }
    });
    uploader.assignBrowse(document.getElementById('fileButton'))
    uploader.on('fileAdded', function (file, event) {
        console.log(file, event)
        $("#progressContainer").css("display", "block");
        calculateFileMd5AndUpload(file.file)
    })
    uploader.on('fileProgress', function (rootFile, file, chunk, message) {
        let offset = chunk.offset + 1;
        let process = ((offset / chunk.file.chunks.length) * 100).toFixed(0);
        console.log(process + "%");
        progressBar.width(process + "%");
        progressBar.text(process + "%");
        console.log(chunk, message);
    })
    uploader.on('fileSuccess', function (rootFile, file, message) {
        message = JSON.parse(message)
        $("#resource").val(message.data.resourceUrl)
        $("#seqs").val(message.data.resourceSeq)
        $("#progressContainer").css("display", "none");
        console.log("fileSuccess:", message);
    })
    uploader.on('fileComplete', function (rootFile, file, message) {
        console.log("fileComplete ", rootFile, file, message);
    })
    uploader.on('fileError', function (rootFile, file, message) {
        console.log("fileComplete:" + message);
        console.log(rootFile, file, message)
    })

    function calculateFileMd5AndUpload(file) {
        let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
        let chunkSize = 1024 * 1024 * 2;
        let chunks = Math.ceil(file.size / chunkSize);
        let currentChunk = 0;
        let spark = new SparkMD5.ArrayBuffer();
        let fileReaderOnload = function (e) {
            spark.append(e.target.result);
            currentChunk++;
            if (currentChunk < chunks) {
                loadNext();
            } else {
                let fileHash = spark.end();
                console.log("computed hash:\n" + fileHash);
                uploader.opts.query = {
                    md5Value: fileHash
                }
                uploader.upload();
            }
        }
        let fileReaderOnerror = function () {
            console.log(" oops, something went wrong.");
        };

        function loadNext() {
            let fileReader = new FileReader();
            fileReader.onload = fileReaderOnload;
            fileReader.onerror = fileReaderOnerror;
            let start = currentChunk * chunkSize;
            let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
            fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
        }

        loadNext();
    }
</script>
</body>
</html>